<template>

	<view v-if="location==undefined">
		<view>
			<map class="map" latitude="38.015117" longitude="112.447509"></map>
		</view>
		<view style="margin-top: 20px" ><text class="zi">当前未在签到区域内，请前往</text></view>
		<view style="margin-top: 20px">
			<uni-row>
				<uni-col :span="12">
					<view class="jux1">
						<text class="jx1z1">本学院签到时间段</text>
						<text class="jx1z2">8:00-12:00</text>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="jux2">
						<text class="jx2z1">签到时间</text>
						<text class="jx2z2">无</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view style="margin-top: 20px">
			<uni-row>
				<uni-col :span="6">
					<view class="ava">
						<text class="ava-text">李</text>
					</view>
				</uni-col>
				<uni-col :span="10">
					<view >
						<text class="name">李晓明</text>
						<text class="time">2024-01-23 星期三</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="qiandao">
						<text class="qiandao-text">签到</text>
					</view>
				</uni-col>
			</uni-row>
		</view>

	</view>
	<view v-else-if="time==undefined">
		<view>
			<map class="map" latitude="38.015117" longitude="112.447509"></map>
		</view>
		<view style="margin-top: 20px" ><text class="zi">当前未到签到时段，请稍候</text></view>
		<view style="margin-top: 20px">
			<uni-row>
				<uni-col :span="12">
					<view class="jux1">
						<text class="jx1z1">本学院签到时间段</text>
						<text class="jx1z2">8:00-12:00</text>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="jux2">
						<text class="jx2z1">签到时间</text>
						<text class="jx2z2">无</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view style="margin-top: 20px">
			<uni-row>
				<uni-col :span="6">
					<view class="ava">
						<text class="ava-text">李</text>
					</view>
				</uni-col>
				<uni-col :span="10">
					<view >
						<text class="name">李晓明</text>
						<text class="time">2024-01-23 星期三</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="qiandao">
						<text class="qiandao-text">签到</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
	<view v-else>
		<view>
			<map class="map" latitude="38.015117" longitude="112.447509"></map>
		</view>
		<view style="margin-top: 20px" ><text class="zi">当前已完成签到，明日请继续</text></view>

		<view style="margin-top: 20px">
			<uni-row>
				<uni-col :span="12">
					<view class="jux1">
						<text class="jx1z1">本学院签到时间段</text>
						<text class="jx1z2">8:00-12:00</text>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="jux2">
						<text class="jx2z1">签到时间</text>
						<text class="jx2z2">无</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view style="margin-top: 20px">
			<uni-row>
				<uni-col :span="6">
					<view class="ava">
						<text class="ava-text">李</text>
					</view>
				</uni-col>
				<uni-col :span="10">
					<view >
						<text class="name">李晓明</text>
						<text class="time">2024-01-23 星期三</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="qiandao">
						<text class="qiandao-text">签到</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script setup>
import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row.vue";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";
	import {ref} from 'vue';
	import data from '../../data/data.json'
let location = ref(null)
location.value=data.location
let time=ref(null)
time.value=data.time



</script>

<style scoped>
.map{
	width: 100%;
	height: 420px;
}
.zi{
	width: 195px;
	height: 21px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 15px;
	color: #212121;
}
.jux1{
	text-align: center;
	width: 162px;
	height: 80px;
	background-image: linear-gradient(132deg, #749BFF 0%, #5392FF 100%);
	border-radius: 12px;
margin-left:10% ;
}
.jux2{
	text-align: center;
	width: 162px;
	height: 80px;
	background-image: linear-gradient(131deg, #FFBF24 0%, #FF9736 100%);
	border-radius: 12px;
	margin-left:10% ;
}
.jx1z1{

	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 40px;
	display: block;
}
.jx1z2{

	font-family: DINAlternate-Bold;
	font-weight: 700;
	font-size: 20px;
	color: #FFFFFF;
	text-align: left;
}
.jx2z1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 40px;
	display: block;
}
.jx2z2{
	font-family: PingFangSC-SNaNpxibold;
	font-weight: 600;
	font-size: 18px;
	color: #FFFFFF;
}
.ava{
	text-align: center;
	width: 64px;
	height: 64px;
	background: #B3CBE6;
	border-radius: 50%;
	margin-left: 18px;
}
.ava-text{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24px;
	color: #FFFFFF;
	line-height: 64px;
}
.name{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #555555;
	display: block;
	line-height: 35px;
}
.time{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #555555;
}
.qiandao{
	width: 100px;
	height: 45px;
	background-image: linear-gradient(180deg, #E6E7E8 0%, #B5BEC9 100%);
	border-radius: 22.5px;
	text-align: center;
}
.qiandao-text{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 18px;
	color: #FFFFFF;
	line-height: 45px;
}

</style>